<template>
  <div id="modifySetting">
    <el-card shadow="hover">
      <div class="header">翻译插件设置</div>
      <el-form :model="setting"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="翻译插件：">
          <el-switch v-model="setting.isTranslate" inactive-text="不启用" active-text="启用"/>
        </el-form-item>
        <el-form-item label="翻译AppID：">
          <el-input v-model="setting.translateId" placeholder="请输入翻译AppID" clearable> </el-input>
        </el-form-item>
        <el-form-item label="翻译Key：">
          <el-input v-model="setting.translateKey" placeholder="请再次输入翻译Key"  clearable  @keyup.enter.native="editLoginPass('ruleForm')"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button id="modifyBtn" type="warning" @click="editLoginPass('ruleForm')">修 改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="hover">
      <div class="header">语言翻译</div>
      <el-form :model="translate"  ref="ruleForm2" label-width="100px" :rules="translateRules" id="language">
        <el-form-item label="待翻译内容：" prop="text">
          <el-input v-model="translate.text" type="textarea" :rows="3"  placeholder="请输入需要翻译的内容" class="public" clearable />
        </el-form-item>
        <el-form-item label="选择语言：" prop="code">
          <el-select v-model="translate.code" clearable placeholder="请选择翻译语言" >
            <el-option
              v-for="item in languageList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="翻译后内容：">
          <el-input v-model="result" type="textarea" :rows="3"  class="public" clearable />
        </el-form-item>
        <el-form-item>
          <el-button id="modifyBtn" type="warning" @click="toTranslate('ruleForm2')">翻 译</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import request from '../../utils/request'
  import { Message } from 'element-ui';
    export default {
      name: "TranslateSetting",
      data(){
        var checkCommon = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('内容不能为空'));
          }else{
            callback();
          }
        };
        return{
          setting:{
            isTranslate:null,
            translateId:"",
            translateKey:""
          },
          languageList:[],
          translate:{
            text:'',
            code:''
          },
          translateRules:{
            text:[{validator: checkCommon, trigger: 'blur' }],
            code:[{validator: checkCommon, trigger: 'change' }],
          },
          result:""
        }
      },
      mounted(){
        this.viewSetting();
        this.codeList()
      },
      methods: {
        //查询
        viewSetting(){
          let that = this;
          request({
            method: 'get',
            url: 'admin/translate/state'
          }).then(function (res) {
            if (res.code === 200) {
              that.setting=res.data;
            }
          }).catch(function (error) {
            console.log(error);
          });
        },
        // 修改
        editLoginPass(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let that = this;
              request({
                method: 'post',
                url: 'admin/translate/state/update',
                data: that.setting
              }).then(function (res) {
                if (res.code === 200) {
                  Message.success('修改成功');
                }
              }).catch(function (error) {
                console.log(error);
              });
            } else {
              return false;
            }
          })
        },
        //语言code列表
        codeList(){
          let that = this;
          that.languageList=[];
          request({
            method: 'get',
            url: 'admin/translate/language/list',
          }).then(function (res) {
            if (res.code === 200) {
              let arr=res.data;
              if(arr.length>0){
                for (let i = 0; i <arr.length; i++) {
                  that.languageList.push({
                    value:arr[i].code,
                    label:arr[i].name
                  })
                }
              }
            }
          }).catch(function (error) {
            console.log(error);
          });
        },
        //翻译
        toTranslate(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let that = this;
              request({
                method: 'post',
                url: 'admin/translate/translate',
                params: that.translate
              }).then(function (res) {
                if (res.code === 200) {
                  that.result=res.data;
                }
              }).catch(function (error) {
                console.log(error);
              });
            } else {
              return false;
            }
          })
        },
      }
    }
</script>

<style scoped src="../../assets/css/translateManagement/translateSetting.css">

</style>
